<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Select - Multiple Value</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
  </head>

  <body>
    <ion-app>
      <ion-header>
        <ion-toolbar>
          <ion-title>Select Item: Multiple Value</ion-title>
        </ion-toolbar>
      </ion-header>

      <ion-content class="outer-content test-content">
        <ion-item>
          <ion-label>Toppings</ion-label>
          <ion-select id="toppings" multiple="true" cancel-text="Nah" ok-text="Okay!">
            <ion-select-option value="bacon">Bacon</ion-select-option>
            <ion-select-option value="olives">Black Olives</ion-select-option>
            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
            <ion-select-option value="peppers">Green Peppers</ion-select-option>
            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
            <ion-select-option value="onions">Onions</ion-select-option>
            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
            <ion-select-option value="pineapple">Pineapple</ion-select-option>
            <ion-select-option value="sausage">Sausage</ion-select-option>
            <ion-select-option value="Spinach">Spinach</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Car Features</ion-label>
          <ion-select id="carFeatures" multiple="true">
            <ion-select-option value="backupcamera">Backup Camera</ion-select-option>
            <ion-select-option value="heatedseats">Headted Seats</ion-select-option>
            <ion-select-option value="keyless">Keyless Entry</ion-select-option>
            <ion-select-option value="navigation">Navigation</ion-select-option>
            <ion-select-option value="parkingassist">Parking Assist</ion-select-option>
            <ion-select-option value="sunroof">Sun Roof</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Pets</ion-label>
          <ion-select id="pets" multiple>
            <ion-select-option value="cat">Cat</ion-select-option>
            <ion-select-option value="dog">Dog</ion-select-option>
            <ion-select-option value="turtle">Turtle</ion-select-option>
            <ion-select-option value="fish">Fish</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Disabled</ion-label>
          <ion-select id="disabled" multiple disabled value="selected">
            <ion-select-option value="selected">Selected Text</ion-select-option>
          </ion-select>
        </ion-item>

        <ion-item>
          <ion-label>Statuses</ion-label>
          <ion-select id="status" value="selected" multiple>
            <ion-select-option value="selected">Selected</ion-select-option>
            <ion-select-option value="default">Default</ion-select-option>
            <ion-select-option value="disabled" disabled="true">Disabled</ion-select-option>
          </ion-select>
        </ion-item>

        <p aria-hidden="true" class="ion-padding">
          <code>toppings: <span id="toppingsResult"></span></code>
          <br />
          <code>carFeatures: <span id="carFeaturesResult"></span></code>
          <br />
          <code>pets: <span id="petsResult"></span></code>
          <br />
        </p>

        <form>
          <ion-list class="ion-padding-vertical">
            <ion-item>
              <ion-input type="text"></ion-input>
            </ion-item>
            <ion-item>
              <ion-label>Select</ion-label>
              <ion-select id="multiple" multiple="true">
                <ion-select-option value="1">1</ion-select-option>
                <ion-select-option value="2">2</ion-select-option>
                <ion-select-option value="3">3</ion-select-option>
              </ion-select>
            </ion-item>
            <ion-button expand="block" type="submit">Submit</ion-button>
          </ion-list>
        </form>

        <ion-item>
          <ion-label position="floating">Floating label</ion-label>
          <ion-select multiple="true">
            <ion-select-option value="bacon">Bacon</ion-select-option>
            <ion-select-option value="olives">Black Olives</ion-select-option>
            <ion-select-option value="xcheese">Extra Cheese</ion-select-option>
            <ion-select-option value="peppers">Green Peppers</ion-select-option>
            <ion-select-option value="mushrooms">Mushrooms</ion-select-option>
            <ion-select-option value="onions">Onions</ion-select-option>
            <ion-select-option value="pepperoni">Pepperoni</ion-select-option>
            <ion-select-option value="pineapple">Pineapple</ion-select-option>
            <ion-select-option value="sausage">Sausage</ion-select-option>
            <ion-select-option value="Spinach">Spinach</ion-select-option>
          </ion-select>
        </ion-item>
      </ion-content>

      <style>
        .outer-content {
          --background: #f2f2f2;
        }
      </style>

      <script>
        var toppings = document.getElementById('toppings');
        toppings.value = ['bacon', 'xcheese'];

        var carFeatures = document.getElementById('carFeatures');

        var pets = document.getElementById('pets');
        pets.value = ['cat', 'dog'];

        setResults(toppings);
        setResults(carFeatures);
        setResults(pets);

        toppings.addEventListener('ionChange', function (ev) {
          setResults(toppings);
        });
        carFeatures.addEventListener('ionChange', function (ev) {
          setResults(carFeatures);
        });
        pets.addEventListener('ionChange', function (ev) {
          setResults(pets);
        });

        function setResults(select) {
          if (select.id) {
            var resultsEl = document.getElementById(select.id + 'Result');
            if (resultsEl) {
              resultsEl.innerHTML = select.value;
            }
          }
        }

        const multiple = document.querySelector('#multiple');
        multiple.value = ['1', '3'];
      </script>
    </ion-app>
  </body>
</html>
